<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>

<head>

    <%@ include file="/include/head.jsp" %>
    <title></title>
    <script src="${rootPath}static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}static/js/mui.pullToRefresh.material.js"></script>
    <script src="${rootPath}static/js/paginationRequest.js"></script>
    <script src="${rootPath}static/js/mui.picker.min.js"></script>
    <script src="${rootPath}static/js/filterForList.js"></script>
    <script>
        //var dataListUrl=interfaces["hospitalList"];
        var dataListUrl = "${rootPath}/wap/seller/sellerList.do?";

        mui.init();
        $(function () {
            createFliterMenus({target: ".filterBox", controlBtn: ".filterMore"});
            initFilter();
        })
    </script>
</head>
<body>
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!-- 菜单容器 -->
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <aside class="mui-off-canvas-right">
            <nav class="mui-bar mui-bar-tab">
                <div class="qy-full-height qy-flex qy-flex-fullHeight">
                    <span id="filterMenuReset" class="qy-flex qy-flex-text-center qy-flex-equalSpace">重置</span>
                    <span id="filterMenuFinish" class="qy-flex qy-flex-text-center qy-flex-equalSpace qy-bg-blue qy-text-white">完成</span>
                </div>
            </nav>
            <div class="aside-scroll">
                <div class="filterMainItemBox" id="sCode">
                    <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px">

                        <c:forEach var="sl" items="${sLabelList}">
                            <div class="qy-font-size-14px qy-margin-bottom-8px">${sl.name}</div>
                            <div class="mui-row labelCodeBox" labelCode="${sl.code}">
                                <c:forEach var="sld" items="${sl.details}">
                                    <div class="mui-col-xs-4 qy-padding-4px qy-text-center" labelCode="${sld.code}">
                                        <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel">${sld.name}</span>
                                    </div>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div class="filterMainItemBox" id="areaId">
                    <div class="qy-padding-vertical-8px qy-border-bottom qy-margin-top-20px qy-padding-bottom-8px">
                        <div class="qy-font-size-14px qy-margin-bottom-8px">机构区域</div>
                        <div class="mui-row labelCodeBox" labelCode="areaIdFlag">

                            <c:forEach items="${areaList}" var="area">
                                <div class="mui-col-xs-4 qy-padding-4px qy-text-center" labelCode="${area.id}">
                                    <span class="qy-bg-default mui-block qy-font-size-14px nowrap fliterItemBoxLabel">${area.name}</span>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- 主页面标题 -->
        <%@ include file="/include/header-search.jsp" %>
        <div class="mui-content">
            <div class="mui-row filterBox qy-bg-white qy-border-top qy-text-black qy-text-small">
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterItem qy-flex curFilter ">综合</span>
                </div>
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterItem qy-flex">评价</span>
                </div>
                <div class="mui-col-xs-3 qy-text-center">

                </div>
                <div class="mui-col-xs-3 qy-full-height qy-flex qy-flex-text-center">
                    <span class="filterMore qy-flex">筛选</span>
                </div>
            </div>
            <div id="slider" class="mui-slider mui-fullscreen">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox0">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell qy-margin-horizontal-8" v-for="ele in datas">
                                <a :href="'${rootPath}/wap/seller/gotoSellerDetail.do?sellerId='+ele.id">
                                    <div class="mui-row">
                                        <div class="mui-col-xs-3">
                                            <img style="width: 90%;"
                                                 :src="ele.thumbnailImg"
                                                 alt="">
                                        </div>
                                        <div class="mui-col-xs-9">
                                            <div class="qy-flex qy-flex-text-between qy-flex-text-top">
                                                <span class="qy-padding-right-8">{{ele.name}}</span>
                                                <span>
                                                    <i :class="'qy-text-icon '+label.classPropertyName" v-for="label in ele.serveLabels">{{label.classPropertyFont}}</i>
                                                </span>
                                            </div>
                                            <div class="qy-flex qy-margin-top-8">
                                                <small class="qy-text-label qy-icon-stethophone">体检套餐</small>
                                                <small class="qy-text-black qy-padding-vertical-8">{{ele.productCount}}</small>
                                            </div>
                                            <div class="qy-flex">
                                                <small class="qy-text-warning">评分</small>
                                                <small class="qy-text-warning qy-padding-vertical-8">{{ele.commentScore}}
                                                </small>
                                            </div>
                                            <div class="qy-flex qy-flex-text-between qy-flex-text-bottom">
                                                <small class="qy-text-label">{{ele.threeAreaName}}/{{ele.formatDistance}}</small>
                                                <span class="qy-text-red qy-flex qy-padding-left-8">
                                        <small>¥</small>
                                        <b class="">{{ele.initiatePric}}</b>
                                        <small>起</small>
                                    </span>
                                            </div>
                                            <div class="qy-flex qy-border-top qy-flex-text-between qy-flex-text-bottom">
                                                <small class="qy-text-black">{{ele.businessHours}}</small>
                                                <small class="qy-icon-downArrowSolid qy-flex ">预约时间</small>
                                            </div>
                                            <div class="qy-flex qy-border-top qy-flex-text-between qy-flex-text-top" v-if="ele.coupons.length">
                                                <div>
                                                    <div class="qy-flex" v-for="coupon in ele.coupons">
                                                        <span v-if="coupon.type == 0">
                                                            <small class="qy-text-icon qy-bg-success">满</small>
                                                            <small>{{coupon.name}}</small>
                                                        </span>
                                                        <span v-if="coupon.type == 1">
                                                            <small class="qy-text-icon qy-bg-success">折</small>
                                                            <small>{{coupon.name}}</small>
                                                        </span>
                                                        <span v-if="coupon.type == 2">
                                                            <small class="qy-text-icon qy-bg-success">现</small>
                                                            <small>{{coupon.name}}</small>
                                                        </span>
                                                    </div>
                                                </div>
                                                <small class="qy-icon-downArrowSolid qy-flex">{{ele.coupons.length}}个活动</small>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>

</body>

</html>